import React from 'react';
import { connect } from 'dva';
import _ from 'lodash';
import { Table, Button, Popconfirm } from 'antd';
import Editor from './edit';
import common from '../common.less';
// import StatusSwitch from '../../../components/statusSwitch';

function MealList({ dispatch, meal }) {
    const { data, editorData } = meal;
    const onEditorData = (data) => {
        if (!_.isEmpty(data)) {
            data.val1 = parseInt(data.val1, 10);
            data.val2 = parseInt(data.val2, 10);
        }
        dispatch({
            type: 'meal/editorVisible',
            payload: { editorData: data },
        });
    };
    const onRemoveData = (rechargeId) => {
        dispatch({
            type: 'meal/removeData',
            rechargeId,
        });
    };
    const columns = [
        {
            title: '名称',
            key: 'name',
            render: (t, {val1, val2}) => `${val2}元畅玩${val1}分钟`,
        },
        {
            title: '畅玩单价(元)',
            key: 'val2',
            dataIndex: 'val2',
        },
        {
            title: '畅玩时长(分钟)',
            key: 'val1',
            dataIndex: 'val1',
        },
        /* {
            title: '状态',
            key: 'status',
            dataIndex: 'status',
            render: (t) => <StatusSwitch status={t} />,
        }, */
        {
            title: '操作',
            render: (t, r) => {
                return (
                    <div>
                        <a onClick={onEditorData.bind(null, r)}>编辑</a>
                        <span className="ant-divider" />
                        <Popconfirm
                            title="您要删除码?"
                            okText="删除"
                            cancelText="取消"
                            onConfirm={onRemoveData.bind(null, r.id)}
                        >
                            <a>删除</a>
                        </Popconfirm>
                    </div>
                );
            },
        },

    ];
    const editProps = {
        name: '畅玩套餐',
        ns: 'meal',
        isNew: _.isEmpty(editorData),
        dispatch,
    };
    return (
        <div className={common.normalWrap}>
            <div className={common.buttonWrap}>
                <Button type="primary" onClick={onEditorData.bind(null, {})}>添加套餐</Button>
            </div>
            <div className={common.table}>
                <Table
                    rowKey="id"
                    columns={columns}
                    dataSource={data}
                />
                <Editor {...{ ...meal, ...editProps }} />
            </div>
        </div>
    );
}

function mapStateToProps({ meal }) {
    return { meal };
}

export default connect(mapStateToProps)(MealList);
